import { 
  Modal, 
  Form, 
  Input, 
  InputNumber, 
  Select,
  Spin
} from 'antd'
import React, { useRef, useState, useEffect } from 'react'
import UploadProductImg from '../Upload'
import { getClass } from 'api'
import './style.css'

function CustomModal(props) {
  /* 是否显示对话框 */
  const visible = props.visible === undefined ? true : props.visible
  const title = props.title || '这是标题'
  /* 存放表单的引用 */
  const formRef = useRef()
  /* 点击确定时的回调 */
  const handleOk = () => {
    // props.ok || props.ok
    formRef.current.validateFields([
      'productName',
      'price',
      'description',
      'inventory',
      'imageUrl',
      'category_id'
    ])
    .then( value => {
      props.ok && props.ok(value, handleCancel)

    })
    .catch(err => {})
  }

  /* 关闭对话框时清空输入表单的字段 */
  const handleCancel = () => {
    props.cancel && props.cancel()
    formRef.current.resetFields()
  }

  /* 表单内部的布局 */
  const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
  };

  /* 获取商品类目 */
  const [cates, setCates] = useState([])
  useEffect(()=>{
    getClass()
    .then(({ data }) => {
      if (data.state) {
        setCates(data.data)
      }
    })
  }, [])

  /* 是否有初始数据 */
  const initValue = props.initValue || null
  /* 初始的遮罩 */
  const [initSpin, setInitSpin] = useState(true)
  useEffect(()=> {
    setTimeout(()=> setInitSpin(false) , 800)
  } , [])

  return (
      <Modal 
        title={title} 
        visible={visible} 
        onOk={handleOk} 
        onCancel={handleCancel}
      >
         <Spin spinning={initSpin}>
         <Form
            {...layout}
            ref={formRef}
            initialValues={initValue}
          >
           
           <Form.Item 
             label="商品图片" 
             name="imageUrl"
             rules={[{ required: true, message: '请上传图片' }]}
             >
              
              <UploadProductImg />
           </Form.Item>
           

            <Form.Item 
              label="商品类目" 
              name="category_id" 
              rules={[{ required: true, message: '请选择商品类目' }]}
            >
              <Select>
                {
                  cates.map( cate => (
                    <Select.Option key={cate._id} value={cate.category_id}>{cate.categoryName}</Select.Option>
                  ))
                }
              </Select>
            </Form.Item>

            <Form.Item
              label="商品名称"
              name="productName"
              rules={[{ required: true }]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="商品价格"
              name="price"
              rules={[{ required: true }, { type: 'number', min: 0.01, max: 9999 }]}
            >
              <InputNumber />
            </Form.Item>

            <Form.Item
              label="商品库存"
              name="inventory"
              rules={[{ required: true }, { type: 'number', min: 0, max: 9999 }]}
            >
              <InputNumber/>
            </Form.Item>

            <Form.Item
              label="商品描述"
              name="description"
              rules={[{ required: true }]}
            >
              <Input.TextArea style={{ resize: 'none' }} rows={5} />
            </Form.Item> 

          </Form>
         </Spin>
      </Modal>
  )
}
export default CustomModal